<template>
  <div class="home">
    <van-search
      v-model="SearchValue"
      placeholder="请输入搜索关键词"
      input-align="center"
      shape="round"
      disabled
      @click="popupSearchCover"
    />

    <van-swipe class="my-swipe" :autoplay="1500" indicator-color="aqua">
      <van-swipe-item v-for="item in banner" :key="item.id">
        <img :src="item.image_url" width="100%" alt="" />
      </van-swipe-item>
    </van-swipe>

    <transition
      name="animate__animated animate__bounce"
      enter-active-class="animate__fadeInRight"
      leave-active-class="animate__fadeOutRight"
    >
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import "animate.css";

import { GetHomeList } from "@/request/api";

export default {
  name: "HomeView",
  data() {
    return {
      SearchValue: "", // 搜索栏的value
      banner: [], // 轮播图数据
    };
  },

  // 组件创建时，就请求获得主页数据
  created() {
    GetHomeList()
      .then((res) => {
        this.banner = res.data.banner;
      })
      .catch((err) => {
        console.log("error!!!");
        console.log(err);
      });
  },
  components: {},
  methods: {
    popupSearchCover() {
      // 若不写后面的错误捕获，则会一直提示“请避免重复跳转路由”，
      // 这是版本问题，也可以通过修改vue-router的版本来修改
      // this.$router.push({ name: "searchPopup" }).catch((err) => {});
      // 但是，最好在router文件夹里的index.js文件中对push的原型对象进行修改

      this.$router.push({ name: "searchPopup" });
    },
  },
};
</script>

<style scoped>
.animate__fadeOutRight,
.animate__fadeInRight {
  --animate-duration: 0.5s;
}
</style>